<!-- 数字展示 -->
<template>
    <div style="height: 100%;">
        <ul class="user_Overview flex" v-if="pageflag">
            <li class="user_Overview-item" style="color: #00fdfa">
                <div class="user_Overview_nums allnum ">
                    <dv-digital-flop :config="config" style="width:100%;height:100%;" />
                </div>
                <p>在途合计</p>
            </li>
            <li class="user_Overview-item" style="color: #07f7a8">
                <div class="user_Overview_nums online">
                    <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
                </div>
                <p>北台在途</p>
            </li>
            <li class="user_Overview-item" style="color: #e3b337">
                <div class="user_Overview_nums offline">
                    <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />

                </div>
                <p>板材在途</p>
            </li>
            <!-- <li class="user_Overview-item" style="color: #f5023d">
                <div class="user_Overview_nums laramnum">
                    <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
                </div>
                <p>告警次数</p>
            </li> -->
        </ul>
        
        <ul class="user_Overview flex" v-if="pageflag">
            <li class="user_Overview-item" style="color: #ff6b6b">
                <div class="user_Overview_nums laramnum">
                    <dv-digital-flop :config="new1config" style="width:100%;height:100%;" />
                </div>
                <p>发出总计</p>
            </li>
            <li class="user_Overview-item" style="color: #4ecdc4">
                <div class="user_Overview_nums allnum">
                    <dv-digital-flop :config="new2config" style="width:100%;height:100%;" />
                </div>
                <p>北台发出</p>
            </li>
            <li class="user_Overview-item" style="color: #45b7d1">
                <div class="user_Overview_nums offline">
                    <dv-digital-flop :config="new3config" style="width:100%;height:100%;" />
                </div>
                <p>板材发出</p>
            </li>
        </ul>
        
        <Reacquire v-else @onclick="getData" line-height="200px">
            重新获取
        </Reacquire>
    </div>
</template>

<script>
let style = {
    fontSize: 24
}
export default {
    data() {
        return {
            options: {},
            userOverview: {
                alarmNum: 0,
                offlineNum: 0,
                onlineNum: 0,
                totalNum: 0,
            },
            pageflag: true,
            timer: null,
            config: {
                number: [100],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#00fdfa",
                    fill: "#00fdfa",
                },
            },
            onlineconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#07f7a8",
                    fill: "#07f7a8",
                },
            },
            offlineconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#e3b337",
                    fill: "#e3b337",
                },
            },
            laramnumconfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#f5023d",
                    fill: "#f5023d",
                },
            },
            new1config: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#ff6b6b",
                    fill: "#ff6b6b",
                },
            },
            new2config: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#4ecdc4",
                    fill: "#4ecdc4",
                },
            },
            new3config: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    // stroke: "#45b7d1",
                    fill: "#45b7d1",
                },
            }

        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    created() {
        this.getData()
    },
    mounted() {
    },
    beforeDestroy() {
        this.clearData()

    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        async getData() {
            this.pageflag = true;
            
            // 生成自定义范围的随机数
            const mockData = {
                totalNum: Math.floor(Math.random() * (2000 - 1000) + 1000), // 1000-2000
                onlineNum: Math.floor(Math.random() * (1800 - 800) + 800),  // 800-1800
                offlineNum: Math.floor(Math.random() * (200 - 50) + 50),    // 50-200
                alarmNum: Math.floor(Math.random() * (100 - 10) + 10)       // 10-100
            };
            
            if (!this.timer) {
                console.log("设备总览 - 模拟数据", mockData);
            }
            
            this.userOverview = mockData;
            this.onlineconfig = {
                ...this.onlineconfig,
                number: [mockData.onlineNum]
            }
            this.config = {
                ...this.config,
                number: [mockData.totalNum]
            }
            this.offlineconfig = {
                ...this.offlineconfig,
                number: [mockData.offlineNum]
            }
            this.laramnumconfig = {
                ...this.laramnumconfig,
                number: [mockData.alarmNum]
            }
            this.new1config = {
                ...this.new1config,
                number: [Math.floor(Math.random() * (100 - 10) + 10)]
            }
            this.new2config = {
                ...this.new2config,
                number: [Math.floor(Math.random() * (100 - 10) + 10)]
            }
            this.new3config = {
                ...this.new3config,
                number: [Math.floor(Math.random() * (100 - 10) + 10)]
            }
            this.switper()
        },
        //轮询
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData()
            };
            this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
        },
    },
};
</script>
<style lang='scss' scoped>
.user_Overview {
    height: 50%; // 每个ul占据50%高度
    
    li {
        flex: 1;
        height: 100%;
        p {
            text-align: center;
            height: 14px;
            font-size: 14px;
        }

        .user_Overview_nums {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 22px;
            margin: 5px auto 5px; // 减少上下边距以适应50%高度
            background-size: cover;
            background-position: center center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }

            &.bgdonghua::before {
                animation: rotating 14s linear infinite;
            }
        }

        .allnum {

            // background-image: url("../../assets/img/left_top_lan.png");
            &::before {
                background-image: url("../../assets/img/left_top_lan.png");

            }
        }

        .online {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");

            }
        }

        .offline {
            &::before {
                background-image: url("../../assets/img/left_top_huang.png");

            }
        }

        .laramnum {
            &::before {
                background-image: url("../../assets/img/left_top_hong.png");

            }
        }

        .new1 {
            &::before {
                background-image: url("../../assets/img/left_top_lan.png");
            }
        }

        .new2 {
            &::before {
                background-image: url("../../assets/img/left_top_lv.png");
            }
        }

        .new3 {
            &::before {
                background-image: url("../../assets/img/left_top_huang.png");
            }
        }
    }
}
</style>